<template>
    <div class="list" >
      <ul class="item" v-for="(item,index) in list" :key="index">
        <li>
          <span class="item-list"></span>
          {{item.title}}
        </li>
        <li v-if="item.children" class="item-child">
          <list :list="item.children"></list>
        </li>
      </ul>
    </div>
</template>

<script>
    export default {
        name: "List",
        props:{
          list:Array
        }
    }
</script>

<style scoped lang="stylus">
    .item{
        background :white;
        color :#333;
        text-indent:.2rem;
        li{
           height :.32rem;
           line-height :.32rem;
           border-bottom : .01rem solid gainsboro;
            span{
              display: inline-block;
              vertical-align :middle;
              width: .2rem;
              height: .2rem;
              background: url(http://s.qunarzz.com/piao/image/touch/sight/detail.png) 0 -.32rem no-repeat;
              background-size: .2rem 2rem;
            }
        }
      .item-child{
        padding-left :.1rem;
      }
    }
</style>
